<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>找帅气靓仔</title>
    <style>
        /* background: linear-gradient(to right, #ffd01e, #ff8917); */
        * {
            margin: 0;
            padding: 0;
            padding: 0 2px;
        }

        .titleAll {
            white-space: nowrap;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        ul {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
        }

        li {
            margin: 8px;
            padding: 10px;
            border: 1px solid white;
            border-radius: 10px;
        }

        .active {
            background-color: skyblue;
            color: black;
            transform: scale(1.3);
            transition: transform 0.3s;
            border: 1px solid gold;
        }

        #res {
            width: 100%;
            height: 250px;
            text-align: center;
            margin-top: 40px;
        }

        #title {
            font-size: 30px;
            line-height: 50px;
            color: gold;
            margin-bottom: 20px;
        }

        #resName {
            height: 160px;
            line-height: 160px;
            font-size: 30px;
            color: #fff9c4;
            border-width: 2px;
            border-style: solid;
            border-color: #000 transparent #000 transparent;
        }

        .namelist {
            color: #cfd8dc;
            white-space: nowrap;
            border: 1px solid #f4f4f4;

            width: 100%;
            text-align: center;
            padding: 10px 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            margin-top: 20px !important;
        }

        .inputname {
            display: inline-block;
            font-size: 26px;
        }

        .inputtop {
            display: flex;
            align-items: center;
            justify-content: center;

        }

        .namelist input {
            height: 36px;
            margin: 0 20px;
            border: none;
        }

        .addname {
            display: inline-block;
            background-color: #58be6a;
            color: #fff;
            border-radius: 6px;
            height: 36px;
            line-height: 36px;
            width: 80px;
            margin: 10px 0;
        }

        .inputname {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .inputbut {
            margin-top: 10px;
        }

        .inputbutTitle {
            font-size: 18px;
            margin-bottom: 10px;
        }

        .uls {
            font-size: 14px;
            color: rgba(249, 234, 234, 0.7);
        }

        .selectall {
            width: 100%;
            border: 1px solid #aaa;
            background-color: #ff982b;
            text-align: center;
            padding-bottom: 10px;
        }

        .chou {
            margin: 10px 0;
        }

        .reast {
            color: #ff982b;
            background-color: #fff;
            border-radius: 0px 8px 8px 0;
            padding: 2px 6px;
            margin-top: 8px;
            position: absolute;
            left: 0;
        }
    </style>
</head>

<body style="background: linear-gradient(to right, #009688, #00bcd2); color: white;">

    <div style="display: flex; flex-flow: column; align-items: center;" id="container">
        <div class="titleAll">
            总人数：<span>{{ students.length }}</span> 人，抽取：
            <input type="text" v-model="size" :disabled="isDisabled" style="width:40px" /> 位
        </div>
        <div class="reast" @click='reast'>刷新</div>
        <div>

            <button type="button" style="height: 50px; font-size: 20px; margin-top: 30px; margin-bottom: 30px;"
                @click="onBtnClick()">
                {{ btnText }}
            </button>
        </div>
        <div class="selectall" v-if="students.length>0">
            <div class="chou">抽奖区域</div>
            <ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-flow: row wrap;">
                <li v-for="(v, i) in students" :key="i" :class="{ active: selectedStudentIndexs.includes(i) }"
                    @click="cur(v)">
                    {{i+1}}.{{ v }}
                </li>
            </ul>
        </div>

        <div id="res" v-if="showName">
            <div id="title">今日最帅付款靓仔</div>
            <div id="resName">
                <span v-for="(v,i) in selectedStudentName">{{ v }}</span>
            </div>
        </div>
        <div class="namelist" v-if="!intervalId">
            <div class="inputbut">
                <div class="inputbutTitle ">点击靓仔名字即可加入抽奖区域</div>
                <ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-flow: row wrap;" class="uls">
                    <li v-for="(v, i) in commonly" :key="i" @click="addNameFn(v)">
                        {{ v }}
                    </li>
                </ul>
            </div>
            <div class="inputtop">
                <div class="inputname">
                    <input type="text" placeholder="请输入靓仔名字" v-model="value">
                </div>
                <div class="addname" @click="addnameBtn">添加</div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
        new Vue({
            el: '#container',
            data() {
                return {
                    value: '',
                    commonly: [
                        '叶瑞',

                        '吴江',
                        '魏坤',
                        '徐鹏',
                        '刘勇',
                        '米奇',
                        '刘闯',
                        '刘帅',
                        '汤奔',
                        '李梅',
                        '王宁',
                        '梁楚星',
                        '罗泽强',
                        '张兵兵',
                        '田坤',
                        '强松',
                        '周檬',
                        '张鹏',
                        '胡岑',
                        '郭浩',
                        '王露露'
                    ],
                    students: [],
                    studentIndexs: [],
                    size: 1,
                    selectedStudentIndexs: [],
                    intervalId: null,
                    selectedStudentName: [],
                    showName: false,
                    isDisabled: false
                }
            },
            computed: {

                btnText() {
                    return this.intervalId
                        ? '确定选择'
                        : `点击随机抽取 ${this.size} 位靓仔`
                }
            },
            methods: {
                reast() {
                    window.location.reload();
                },
                // 点击名字加入
                addNameFn(val) {
                    let is = this.students.some((v) => v === val)
                    if (is) {
                        alert('已经添加过靓仔');
                        return;
                    }
                    this.students.push(val)
                },

                // 删除名字
                cur(v) {
                    console.log(v);
                    let str = '确认删除 ' + v + ' 吗？';

                    if (confirm(str)) {
                        let index = this.students.indexOf(v)
                        this.students.splice(index, 1)
                    }

                },
                addnameBtn() {
                    if (!this.value) {
                        alert('请输入靓仔名字');
                        return
                    };

                    let is = this.students.some((v) => v == this.value)
                    console.log(is);
                    if (is) {
                        alert('已经添加过靓仔');
                        return;
                    }
                    this.students.push(this.value)
                },
                onBtnClick() {
                    if (this.students.length < 3) {
                        alert('需要2位以上靓仔')
                        return
                    }
                    this.studentIndexs = this.students.map((v, i) => i)
                    this.students.sort(() => 0.7 - Math.random())

                    clearInterval(this.intervalId)
                    if (this.intervalId) {
                        this.intervalId = null
                        this.isDisabled = false
                        for (let i = 0; i < this.students.length; i++) {
                            for (let j = 0; j < this.selectedStudentIndexs.length; j++) {
                                if (this.selectedStudentIndexs[j] == i) {
                                    this.selectedStudentName.push(this.students[i])
                                }
                            }
                        }
                        this.showName = true
                    } else {
                        if (this.size > 10) {
                            alert('不能同时抽10个以上倒霉蛋，给点面子')
                            this.size = 1
                            return
                        }
                        this.intervalId = setInterval(() => {
                            this.selectedStudentName = []
                            this.selectedStudentIndexs = this.studentIndexs
                                .sort(() => 0.6 - Math.random())
                                .slice(0, this.size)
                        }, 40)
                        this.isDisabled = true
                        this.showName = false
                    }
                }
            },
            created() {
                this.studentIndexs = this.students.map((v, i) => i)
                this.students.sort(() => 0.5 - Math.random())
            }
        })
    </script>
</body>

</html>